<template>
    <Row class="loginBox">
        <Col span="6" offset="9">
            <h2 class="title" >{{loginTitle}}</h2>
            <Form ref="formInline" :model="formInline" :rules="ruleInline">
                <Form-item prop="username" >
                    <Input type="text" v-model="formInline.username" placeholder="Username">
                    <Icon type="person" slot="prepend"></Icon>
                    </Input>
                </Form-item>
                <Form-item prop="password">
                    <Input type="password" v-model="formInline.password" placeholder="Password">
                    <Icon type="locked" slot="prepend"></Icon>
                    </Input>
                </Form-item>
                <Form-item>
                    <Button type="primary" long  @click="handleSubmit('formInline')" :loading="handLoad">Sign In</Button>
                </Form-item>
            </Form>
            </Col>
    </Row>
</template>

<script>

    export default {
        data () {
            return {
                loginTitle:'Login Form',
                formInline: {
                    username: '',
                    password: ''
                },
                ruleInline: {
                    username: [
                        { required: true, message: '请填写用户名'}
                    ],
                    password: [
                        { required: true, message: '请填写密码' },
                        { type: 'string', min: 6, message: '密码长度不能小于6位' }
                    ]
                },
                handLoad:false


            }
        },
        mounted: function () {
            this.$nextTick(function () {
                this.$router.push({path: '/login'});
                document.onkeyup=function () {
                    if(event.keyCode==13) {
                        this.handleSubmit('formInline')
                    }
                }.bind(this);

                localStorage.clear();
            })
        },
        computed:{
            uid(){
                return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                    var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
                    return v.toString(16);
                });
            }
        },
        methods: {
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.handLoad=true;
                        loginApi.Login({
                            username:this.formInline.username,
                            password:this.formInline.password,
                            uuid:this.uid
                        }).then(response =>{
                            if(response.data.rsp_head.rsp_code==200){
                                this.handLoad=false;
                                this.$Message.success('登录成功!');
                                this.navData=response.data.rsp_body.user;
                                var uris=response.data.rsp_body.user.uris;
                                var $this=this;
                                uris.map(function (v) {
                                    if(v.checked==true){
                                        $this.leftData.push(v)
                                    }
                                });

                                //console.log(this.leftData)


                                //localStorage.setItem('messages',response.data.rsp_body.user.messages);


                                this.$router.push({path: '/index'});


                            }else{
                                this.handLoad=false;

                                this.$Message.error({
                                    content: response.data.rsp_head.rsp_info,
                                    duration: 1000,
                                    closable: true
                                });
                                this.formInline={
                                    username: '',
                                    password: ''
                                }
                            }
                        }).catch(error=>{
                            console.log(error);
                        })
                    } else {
                        this.handLoad=false;
                    }
                })
            }
        }

    }
</script>

<style scoped>
    .loginBox{margin-top: 120px;}
    .title{text-align: center;line-height: 60px;}
</style>
